<template>
	<view class="tel-login-page special-bg">
		<u-navbar :autoBack="true" :placeholder="true" leftIconColor="#ffffff" :bgColor="bgColor">
			<view slot="center" class="navtitle">邮箱注册</view>
		</u-navbar>
		<view class="title font-text">邮箱注册</view>
		<view class="info-box">
			<view class="info-item">
				<u-input class="input" disabled placeholder="请选择一个国家" border="none" v-model="country">
					<view slot="suffix" @click="gocountry()">
						<u-icon name="arrow-up-fill" v-if="iscountry == true" color="#999" size="18"></u-icon>
						<u-icon name="arrow-down-fill" v-else color="#999" size="18"></u-icon>
					</view>
				</u-input>
			</view>
			<view class="info-item">
				<u--input class="input" placeholder="请输入您的邮箱" border="none" v-model="email" type="text"></u--input>
			</view>
			<view class="info-item">
				<u-input class="input" placeholder="请输入您的密码" border="none" v-model="password"
					:type="eye == true?'text':'password'">
					<view slot="suffix" @click="goeye()">
						<u-icon name="eye-fill" v-if="eye == true" color="#999" size="23"></u-icon>
						<u-icon name="eye-off" v-else color="#999" size="23"></u-icon>
					</view>
				</u-input>
			</view>
			<view class="info-item">
				<u--input class="input" placeholder="请输入邀请码" border="none" v-model="code" type="number"></u--input>
			</view>
		</view>
		<view v-if="list.length > 0">
			<u-picker :show="iscountry" keyName="title" @confirm="confirm" @cancel="cancel" :columns="list"></u-picker>
		</view>
		<view class="policy-text">
			注册即标识您同意我们的<text @click="gorichtext('use')">《使用条款》</text>还有我们的 <text
				@click="gorichtext('policy')">《隐私与政策》</text>
		</view>
		<view class="login-btn" @click="goregister">注册</view>
		<view class="goregister" @click="gonavto">
			现有账户？现在登录
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgColor: 'rgba(0,0,0,0.0)',
				email: '',
				password: '',
				code: '',
				checkvalue: false,
				eye: false,
				iscountry: false,
				country: '中国',
				text: '+86',
				area_code: '42',
				list: [],
			}
		},
		onLoad() {
			this.postsecle()
		},
		methods: {
			goregister() {
				if (this.email == '') {
					uni.showToast({
						title: '邮箱不能为空！',
						icon: 'none'
					})
					return
				}
				if (this.password == '') {
					uni.showToast({
						title: '密码不能为空！',
						icon: 'none'
					})
					return
				}
				if (this.code == '') {
					uni.showToast({
						title: '邀请码不能为空！',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					mask: true
				})
				let params = {
					area_code: this.area_code,
					email: this.email,
					password: this.password,
					parent_code: this.code
				}
				this.$Request({
					method: 'POST',
					data: params,
					url: '/user/register'
				}).then(res => {
					uni.hideLoading()
					console.log(res)
					if (res.data.code == 1) {
						uni.showToast({
							title: '注册成功',
							icon: 'none'
						})
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/login/index'
							})
						}, 1000)
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			postsecle() {
				this.$Request({
					method: 'POST',
					url: '/common/country'
				}).then(res => {
					if (res.data.code == 1) {
						res.data.data.map(item => {
							item.title = item.cn + ' ' + item.code
						})
						let info = [
							res.data.data
						]
						this.list = info
					}
				})
			},
			confirm(e) {
				console.log(e)
				this.iscountry = false
				this.country = e.value[0].cn
				this.text = e.value[0].code
				this.area_code = e.value[0].id
			},
			gocountry() {
				this.iscountry = !this.iscountry
			},
			cancel() {
				this.iscountry = false
			},
			gorichtext(e) {
				uni.navigateTo({
					url: '/pages/richtext/index?name=' + e
				})
			},
			goeye() {
				this.eye = !this.eye
			},
			gonavto() {
				uni.navigateTo({
					url: '/pages/login/email-login/index'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.tel-login-page {
		.goregister {
			color: #FFFFFF;
			font-size: 24rpx;
			text-align: center;
		}

		.login-btn {
			margin: 30rpx;
			line-height: 110rpx;
			height: 110rpx;
			background: linear-gradient(270deg, #87BAFF 0%, #6897FF 100%);
			border-radius: 58rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			font-weight: 900;
		}

		.policy-text {
			font-size: 24rpx;
			padding: 30rpx 40rpx;
			color: #FFFFFF;

			text {
				color: #2979FF;
			}
		}

		.info-box {
			padding: 0 30rpx;
			margin-top: 80rpx;

			.info-item {
				height: 100rpx;
				background: #F6FAFF;
				border-radius: 58rpx;
				margin-bottom: 30rpx;
				padding: 10rpx 30rpx;

				.input {
					height: 80rpx;
				}
			}
		}

		.navtitle {
			color: #fff;
			font-size: 32rpx;
		}

		.logo {
			width: 200rpx;
			padding-top: 100rpx;
			margin: 0 auto;

			image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 100%;
			}
		}

		.title {
			font-size: 40rpx;
			margin-top: 50rpx;
			color: #FFFFFF;
			font-weight: 900;
			padding: 0 30rpx;
			letter-spacing: 8rpx;
		}
	}
</style>